AJAX (Asynchronous JavaScript and XML) একটি ওয়েব ডেভেলপমেন্ট কৌশল যা জাভাস্ক্রিপ্ট ব্যবহার করে সার্ভারের সাথে ডেটা আদান-প্রদান করতে পারে, পেজটি পুনরায় লোড না করেই। AJAX-এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন আরও দ্রুত এবং ইন্টারঅ্যাকটিভ হতে পারে। এটি JSON, XML, HTML বা সাধারণ টেক্সট ডেটা ব্যবহার করে কাজ করতে পারে।
AJAX কাজ করে নিচের ধাপগুলোতে:
AJAX পেজটি পুনরায় লোড না করেই প্রয়োজনীয় ডেটা লোড করে, যা ইউজারদের জন্য দ্রুত এবং স্মুথ এক্সপেরিয়েন্স প্রদান করে।
AJAX কাজ করার জন্য নিচের উপাদানগুলো প্রয়োজন:
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// রিকোয়েস্ট সেট করা
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// রেসপন্স হ্যান্ডল করা
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('Error:', xhr.status);
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
ব্যাখ্যা: এখানে একটি GET রিকোয়েস্ট করা হয়েছে এবং সার্ভারের রেসপন্সকে কনসোলে প্রদর্শন করা হয়েছে।
Fetch API হলো XMLHttpRequest এর একটি আধুনিক বিকল্প যা প্রমিস (Promise) ব্যবহার করে কাজ করে।
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
ব্যাখ্যা: Fetch API ব্যবহার করে একটি GET রিকোয়েস্ট করা হয়েছে এবং সার্ভারের রেসপন্সকে কনসোলে প্রদর্শন করা হয়েছে। এটি আরও পাঠযোগ্য এবং প্রমিস ভিত্তিক।
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
</head>
<body>
<h1>AJAX Example</h1>
<button id="loadData">Load Data</button>
<div id="dataContainer"></div>
<script>
document.getElementById('loadData').addEventListener('click', function() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
let output = '';
data.slice(0, 5).forEach(post => {
output += `<h3>${post.title}</h3><p>${post.body}</p>`;
});
document.getElementById('dataContainer').innerHTML = output;
}
};
xhr.send();
});
</script>
</body>
</html>
ব্যাখ্যা: এখানে একটি বোতামে ক্লিক করার মাধ্যমে AJAX রিকোয়েস্ট করা হয়েছে এবং রেসপন্স থেকে প্রাপ্ত ডেটা ডাইনামিকভাবে HTML-এ যুক্ত করা হয়েছে।
AJAX এর আধুনিক বিকল্প যা প্রমিস ভিত্তিক এবং আরও সিম্পল।
একটি তৃতীয় পক্ষের লাইব্রেরি, যা AJAX রিকোয়েস্ট করার প্রক্রিয়াকে আরও সহজ করে তোলে।
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
AJAX হলো জাভাস্ক্রিপ্ট এবং XML ব্যবহার করে সার্ভারের সাথে ডেটা আদান-প্রদানের একটি কৌশল, যা পেজ রিলোড না করেই কাজ করে। এটি ওয়েব অ্যাপ্লিকেশনকে দ্রুত, ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। XMLHttpRequest এবং Fetch API এর মাধ্যমে AJAX রিকোয়েস্ট করা যায়, যেখানে Fetch API আধুনিক এবং আরও সহজ। AJAX ব্যবহারে কিছু সীমাবদ্ধতা থাকলেও এটি ওয়েব ডেভেলপমেন্টে একটি অপরিহার্য প্রযুক্তি।
AJAX (Asynchronous JavaScript and XML) একটি ওয়েব ডেভেলপমেন্ট কৌশল যা জাভাস্ক্রিপ্ট ব্যবহার করে সার্ভারের সাথে ডেটা আদান-প্রদান করতে পারে, পেজটি পুনরায় লোড না করেই। AJAX-এর মাধ্যমে ওয়েব অ্যাপ্লিকেশন আরও দ্রুত এবং ইন্টারঅ্যাকটিভ হতে পারে। এটি JSON, XML, HTML বা সাধারণ টেক্সট ডেটা ব্যবহার করে কাজ করতে পারে।
AJAX কাজ করে নিচের ধাপগুলোতে:
AJAX পেজটি পুনরায় লোড না করেই প্রয়োজনীয় ডেটা লোড করে, যা ইউজারদের জন্য দ্রুত এবং স্মুথ এক্সপেরিয়েন্স প্রদান করে।
AJAX কাজ করার জন্য নিচের উপাদানগুলো প্রয়োজন:
// XMLHttpRequest তৈরি
const xhr = new XMLHttpRequest();
// রিকোয়েস্ট সেট করা
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
// রেসপন্স হ্যান্ডল করা
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.error('Error:', xhr.status);
}
};
// রিকোয়েস্ট পাঠানো
xhr.send();
ব্যাখ্যা: এখানে একটি GET রিকোয়েস্ট করা হয়েছে এবং সার্ভারের রেসপন্সকে কনসোলে প্রদর্শন করা হয়েছে।
Fetch API হলো XMLHttpRequest এর একটি আধুনিক বিকল্প যা প্রমিস (Promise) ব্যবহার করে কাজ করে।
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
ব্যাখ্যা: Fetch API ব্যবহার করে একটি GET রিকোয়েস্ট করা হয়েছে এবং সার্ভারের রেসপন্সকে কনসোলে প্রদর্শন করা হয়েছে। এটি আরও পাঠযোগ্য এবং প্রমিস ভিত্তিক।
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
</head>
<body>
<h1>AJAX Example</h1>
<button id="loadData">Load Data</button>
<div id="dataContainer"></div>
<script>
document.getElementById('loadData').addEventListener('click', function() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
let output = '';
data.slice(0, 5).forEach(post => {
output += `<h3>${post.title}</h3><p>${post.body}</p>`;
});
document.getElementById('dataContainer').innerHTML = output;
}
};
xhr.send();
});
</script>
</body>
</html>
ব্যাখ্যা: এখানে একটি বোতামে ক্লিক করার মাধ্যমে AJAX রিকোয়েস্ট করা হয়েছে এবং রেসপন্স থেকে প্রাপ্ত ডেটা ডাইনামিকভাবে HTML-এ যুক্ত করা হয়েছে।
AJAX এর আধুনিক বিকল্প যা প্রমিস ভিত্তিক এবং আরও সিম্পল।
একটি তৃতীয় পক্ষের লাইব্রেরি, যা AJAX রিকোয়েস্ট করার প্রক্রিয়াকে আরও সহজ করে তোলে।
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});
AJAX হলো জাভাস্ক্রিপ্ট এবং XML ব্যবহার করে সার্ভারের সাথে ডেটা আদান-প্রদানের একটি কৌশল, যা পেজ রিলোড না করেই কাজ করে। এটি ওয়েব অ্যাপ্লিকেশনকে দ্রুত, ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। XMLHttpRequest এবং Fetch API এর মাধ্যমে AJAX রিকোয়েস্ট করা যায়, যেখানে Fetch API আধুনিক এবং আরও সহজ। AJAX ব্যবহারে কিছু সীমাবদ্ধতা থাকলেও এটি ওয়েব ডেভেলপমেন্টে একটি অপরিহার্য প্রযুক্তি।
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
